<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Blog Homepage</title>
    <!-- Add references to your CSS files here -->
</head>
<body>
<header>
    <h1>Welcome to My Blog</h1>
    <!-- Add New Post Button -->
    <a th:href="@{/post/create}" style="text-decoration: none; color: white; background-color: #007bff; padding: 0.375rem 0.75rem; border-radius: 0.25rem;">Add New Post</a>
</header>

<section>
    <h2>All Blog Posts</h2>
    <div th:if="${posts.isEmpty()}">
        <p>No posts available.</p>
    </div>
    <div th:unless="${posts.isEmpty()}">
        <ul>
            <!-- Loop through the blog posts -->
            <li th:each="post : ${posts}">
                <h3 th:text="${post.title}">Post Title</h3>
                <!-- Link to the detailed post view -->
                <a th:href="@{/post/{id}(id=${post.id})}">Read more</a>
            </li>
        </ul>
    </div>
</section>

<footer>
    <p>Blog System Demo</p>
</footer>
</body>
</html>
